<template>
  <div class="pd-20">
    <el-input v-model="searchCondition" clearable class="w-200" placeholder="请输入关键词" @clear="handleQuey()"></el-input>
    <el-button type="primary"
               @click="handleQuey()">查 询
    </el-button>
    <el-button type="primary"
               @click="handleOption('add', null)">新 增
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:drugDiseaseItemNames="{row}">
        <p v-for="item in row.drugDiseaseItemNames"
           :key="item">
          <el-tag type="danger"
                  style="margin-right:5px; margin-bottom: 5px;">
            {{ item }}
          </el-tag>
        </p>
        <span v-if="!row.drugDiseaseItemNames||row.drugDiseaseItemNames.length==0">无</span>
      </template>

      <template v-slot:scaleNames="{row}">
        <p v-for="item in row.scaleNames"
           :key="item">
          <el-tag type="danger"
                  style="margin-right:5px; margin-bottom: 5px;">
            {{ item }}
          </el-tag>
        </p>
        <span v-if="!row.scaleNames">无</span>
      </template>
      <template v-slot:option="{row}">
        <el-button type="primary"
                   size="mini"
                   @click="handleOption('edit', row)">编辑
        </el-button>
        <el-button type="danger"
                   size="mini"
                   @click="handleOption('del', row)">删除
        </el-button>
        <el-button type="warning"
                   size="mini"
                   @click="handleOption('config', row)">指标配置
        </el-button>
        <el-button type="info"
                   size="mini"
                   @click="handleOption('content', row)">科普内容
        </el-button>
        <el-button type="warning"
                   size="mini"
                   @click="handleOption('zibing', row)">子病管理
        </el-button>
        <el-button type="success"
                   size="mini"
                   v-if="row.isConfigureRiskAssessment===0"
                   @click="handleOption('riskAssessment', row)">风险评估（未配置）
        </el-button>
        <el-button type="info"
                   size="mini"
                   v-if="row.isConfigureRiskAssessment===1"
                   @click="handleOption('riskAssessment', row)">风险评估（已配置）
        </el-button>
      </template>
    </element-table>
    <disease-dialog :dataObj="dataObj"
                    v-if="diseaseDialog"
                    :visible.sync="diseaseDialog"/>
    <kepu-dialog
      :dataObj="dataObj"
      v-if="kepuDialog"
      :visible.sync="kepuDialog"/>
    <zhibiao-dialog
      :dataObj="dataObj"
      v-if="zhibiaoDialog"
      :visible.sync="zhibiaoDialog"/>
    <zibing-dialog
      :dataObj="dataObj"
      v-if="zibingDialog"
      :visible.sync="zibingDialog"/>
    <risk-dialog
      :dataObj="dataObj"
      v-if="riskShow"
      :visible.sync="riskShow"/>
  </div>
</template>
<script>
import ElementTable from '@/base/ElementTable'
import diseaseDialog from './diseaseDialog'
import kepuDialog from './kepuDialog'
import zhibiaoDialog from './zhibiaoDialog'
import zibingDialog from "./zibingDialog";
import riskAssessmentDialog from "./riskAssessmentDialog";

export default {
  name: 'diseaseList', // 病种管理
  data() {
    return {
      loading: false,
      diseaseDialog: false,
      kepuDialog: false,
      zhibiaoDialog: false,
      zibingDialog: false,
      riskShow: false,
      tableData: [],
      columns: [
        {
          label: '病种名称',
          prop: 'name'
        }, {
          label: '关联沃慧管病类',
          prop: 'drugDiseaseItemNames',
          width: 300,
          isSlot: true
        }, {
          label: '关联量表名称',
          prop: 'scaleNames',
          width: 300,
          isSlot: true
        }, {
          label: '发布时间',
          prop: 'createTime',
          align: 'center',
          width: 200,
          formatter: (row, cellValue) => {
            return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
          }
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 590
        }
      ],
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 20,
      dataObj: {},
      searchCondition: ''
    }
  },
  methods: {
    async getList() {
      this.loading = true;

      const {data: res} = await this.post(this.api.healthMap.getHealthMapDiseaseList, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        allShowType: 1,
        searchCondition: this.searchCondition
      });
      if (res.code === '200') {
        this.loading = false;
        this.tableData = res.object;
        this.pageTotal = res.totalNum;
      }

    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
    handleQuey() {
      this.pageIndex = 1
      this.getList()
    },
    async handleOption(op, row) {
      switch (op) {
        case 'add':
          this.dataObj = null;
          this.diseaseDialog = true;
          break;
        case 'edit':
          this.dataObj = Object.assign({}, row);
          this.diseaseDialog = true;
          break;
        case 'del':
          this.$confirm('是否要确认?', '提示', {
            type: 'warning'
          }).then(() => {
            this.post(this.api.healthMap.getHealthMapDiseaseDel, {
              id: row.id
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('更新成功!');
                this.getList()
              }
            })
          })

          break;
        case 'config':
          this.dataObj = Object.assign({}, row);
          this.zhibiaoDialog = true;
          break;
        case 'content':
          this.dataObj = Object.assign({}, row);
          this.kepuDialog = true;
          // let params = { pushTime: row.pushTime, type: row.type };
          // this.$router.push({ name: 'ticketEcharts', query: { routeParams: JSON.stringify(params) } });
          break;
        case 'zibing':
          this.dataObj = Object.assign({}, row);
          this.zibingDialog = true;
          break;
        case 'riskAssessment':
          this.dataObj = Object.assign({}, row);
          this.riskShow=true
          break
      }
    }
  },
  created() {
    this.getList();
  },
  components: {
    'element-table': ElementTable,
    'disease-dialog': diseaseDialog,
    'kepu-dialog': kepuDialog,
    'zhibiao-dialog': zhibiaoDialog,
    'zibing-dialog': zibingDialog,
    'risk-dialog':riskAssessmentDialog
  }
}
</script>
<style scoped lang="scss">
</style>
